<template>
    <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>
      <img :src="list.pic" alt="">
  </van-swipe-item>
</van-swipe>
   {{list.title}}
<p> ￥{{list.price}} </p>

<button @click="del"> 清空 </button>


<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" dot />
  <van-goods-action-icon icon="cart-o" text="购物车" :badge="num"  @click="cart"/>
  <van-goods-action-icon icon="shop-o" text="店铺"  />
  <van-goods-action-button type="warning" text="加入购物车" @click="addCart(list)"/>
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
    </div>
</template>

<script>
import { getDetails } from '../utils/api';
export default {
    
    data() {
        return {
            list:{},
            cartList:[]
        };
    },
    created() {
        getDetails(this.$route.query.obj._id).then(res => {
            this.list = res
        })
        this.cartList = this.$store.state.cartList
    },
    methods: {
        cart(){
            this.$router.push('/cart')
        },
        // 加入购物车
        addCart() {
            this.$store.commit('changeCartList',this.list)
            console.log(this.$store.state.cartList.length);

            
        },
        //清空
        del() {
            this.$store.commit('delAllCart','')
            console.log(this.$store.state.cartList);

        }

    },
    //组件挂载
    components: {},
    //计算属性
    computed: {
        num() {
            var n = 0
            this.cartList.forEach(el => {
                n+=el.num
            });
            return n
        }
    },
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    height: 200px;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    img{
        width: 100%;
        height: 100%;
    }
  }
</style>
